<template>
  <div class="allDa">
    <el-dialog title="全部" :visible.sync="dialogTableVisible" append-to-body custom-class="all-dol">
      <!-- <lb-table :tableData="tableData">
      </lb-table> -->
      <div v-for="(item,index) in tableData.data" :key="index" class="all-box">
        <div class="title" :style="{color:color[index]}">{{item[tableData.column[0].prop]}}</div>
        <div class="bottom">
          <div class="left">
            <div :style="[{width:item[tableData.column[2].prop]+'%'},{background:'linear-gradient(to right, #0d498c,'+color[index]+')'}]"></div>
          </div>
          <div class="right" :style="{color:color[index]}">{{item[tableData.column[4].prop]}}{{unit}}
            <span :style="{color:color[index]+'!important'}" v-if="right.unit=='%'"> {{(item[tableData.column[1].prop]/allNumber*100).toFixed(1)+'%'}}</span>
            <span :style="{color:color[index]+'!important'}" v-if="right.unit!='%'&&right.unit!='' "> ({{item[tableData.column[3].prop]+right.unit}})</span>
          </div>
        </div>
      </div>
      <div style="width:100%;text-align:center" v-if="tableData.data.length==0">暂无数据</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  watch: {
    "tableData.data": {
      handler(newName, oldName) {
        this.color = ["#FF4618", "#FF932E", "#F1C648"];
        this.gradientColor = ["#FF4618", "#FF932E", "#F1C648"];
        let number = 0;
        let numberArr = [];
        this.allNumber = 0;
        for (let i in this.tableData.data) {
          numberArr.push(this.tableData.data[i][this.tableData.column[1].prop]);
          this.allNumber +=
            this.tableData.data[i][this.tableData.column[1].prop];
        }
        number = Math.max(...numberArr);
        for (let item of this.tableData.data) {
          item[this.tableData.column[2].prop] =
            (item[this.tableData.column[1].prop] / number) * 100;
          this.color.push("#D4F0FF");
          this.gradientColor.push("#1bc1f4");
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      unit: "标准箱",
      right: {
        unit: "",
      },
      color: [],
      allNumber: 0,
      gradientColor: [],
      dialogTableVisible: false,
      tableData: {
        column: [
          {
            prop: "name",
            label: "名称",
            width: "500px",
          },
          {
            prop: "value",
            label: "数量",
          },
          {
            prop: "baifenbi",
            label: "占比",
          },
          {
            prop: "value2",
            label: "占比",
          },
          {
            prop: "value",
            label: "占比",
          },
        ],
        data: [],
      },
    };
  },
};
</script>

<style>
.allDa .el-table .cell {
  padding: 10px;
}
.allDa .el-dialog__body {
  padding-top: 20px;
}
.all-dol {
  min-width: 900px !important;
  width: 900px !important;
}
</style>
<style lang="scss" scoped>
.all-box {
  width: 100%;
  padding: 0 10px;
  color: #d4f0ff;
  /* background: red; */
  .bottom {
    width: 100%;
    height: 30px;
    // background: red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      height: 10px;
      width: 65%;
      div {
        background: linear-gradient(to right, #0d498c, #1bc1f4);
        border-radius: 4px;
        height: 10px;
        width: 100%;
      }
    }
  }
}
</style>